<template>
<div class="box1-1">
  <el-card class="box-card-2">
      <div calss="filler">
        <div class="title89"> <h3>每周·地区票房</h3></div>
      <div class="abb">
          <el-select v-model="selectedWeek" placeholder="请选择周数" @change="getData" >
            <el-option v-for="week in weeks" :key="week" :label="`第${week}周`" :value="week"></el-option>
          </el-select>
      </div>
      </div>
    </el-card>
<div class="building88" border>
<el-table :data="tableData" style="width: 100%" >
  <el-table-column type="selection" width="80" />
  <el-table-column prop="area" label="影院名称" width="300" />
  <el-table-column prop="box_office" label="票房（万元）" width="300" sortable />
  <el-table-column prop="people" label="人次（万人）" width="300" sortable />
  <el-table-column prop="session" label="场次（千场）" width="300" sortable />   
  <el-table-column prop="week" label="周数"  width="100" />
</el-table>
</div>
</div>
</template>

<script>
   export default {
    data() {
      return {
        tableData: [],
        selectedWeek: 1,
        weeks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
      }
    },
   
  methods: {
      getData() {
        
        this.$http.get('/areaWeek/v1/week/' +this.selectedWeek).then(response => {
             console.log(this.selectedWeek)
            this.tableData = response.data;
          }).catch(error => {
      console.log(error);
    });
      }
    },
    mounted() {
    // 获取默认周数的数据
    this.getData(16);
  },
  }


  </script>

<style>
.title89{
  color: #0f3fce;
  margin-top:-17px;
}
.abb{
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  width: 100%;
  max-width: 200px;
  margin-top:-45px;
}
.fenye {
  margin-top: 20px;
  margin-left: 270px;
}
.box-card-2 {
  width: 98%;
  margin-left: 16px;
  margin-top: 10px;
  height: 65px;
}
.box1-1 {
  /* background: url("/public/koubeibg.jpg");
  background-size: cover; */
  background-color: rgb(230, 229, 229);
  overflow: auto;
  width: 100%;
}
</style>